<template>
  <div class="title-wrapper">
    <template v-for="(item, index) in titleArr">
      <span @click="handleTitleClick(index)" :key="index" class="title-item">{{ item.text }}</span>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    titleArr: { type: Array },
  },
  methods: {
    handleTitleClick(index) {
      this.$emit('titleClick', index)
    },
  },
}
</script>

<style>
.title-wrapper {
  position: sticky;
  top: 0px;
  background: #fff;
  z-index: 999;
}

.title-item {
  display: inline-block;
  padding: 5px 5px;
  margin: 5px;
  background: lightcoral;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  align-items: center;
}
</style>
